<template>
	<view class="container bg-white">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">【共享充电宝订单】{{tradeNo}}</view>
		</view>
		<block v-for="(item,index) in listData" :key="index">
			<view class="cu-timeline">
			  <view class="cu-time">{{item.dateStr}}</view>
			  <view class="cu-item cuIcon-noticefill" v-for="(child,childIndex) in item.items" :key="childIndex">
			    <view class="content shadow-blur" :class="child.state == 4?'bg-red':'bg-grey'">
			      <text>【{{child.timeStr}}】</text>{{child.content}}
				  <view v-if="child.errorsMsg && child.errorsMsg.length > 0">{{child.errorMsg}}</view>
			    </view>
			  </view>
			</view>
		</block>
		<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
		<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tradeNo:null,
				createDate:null,
				listData:[]
			};
		},
		onLoad(option) {
			this.tradeNo = option.tradeNo;
			this.createDate = option.createDate;
			this._loadListData();
		},
		methods:{
			_loadListData:function(){
				if(this.tradeNo){
					const _self = this;
					const api = this.$request;
					api.post(api.url.orderOperateList,{
						tradeNo:this.tradeNo,
						createDate:this.createDate
					},(res)=>{
						console.log(res)
						if(res.code==200){
							_self.listData = res.body.items;
						}else if(res.code == 202){
							//不做任何事
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
.container{height:100vh;}
.cu-timeline .cu-time{width:200rpx;}
</style>
